@import '@/styles/variables.scss';

.product-detail {
  min-height: 100vh;
  background-color: $bg-color;
  padding-bottom: 120rpx;
  
  .swiper-container {
    width: 100%;
    height: 750rpx;
    background-color: #fff;
    
    .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      
      .slide-image {
        width: 100%;
        height: 750rpx;
      }
    }
    
    .indicator {
      position: absolute;
      right: 30rpx;
      bottom: 30rpx;
      padding: 10rpx 20rpx;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 30rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
  
  .basic-info {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .price-row {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .price {
        font-size: 48rpx;
        font-weight: bold;
        color: $primary-color;
        
        &::before {
          content: '¥';
          font-size: 70%;
          margin-right: 4rpx;
        }
      }
      
      .original-price {
        font-size: 28rpx;
        color: $text-color-secondary;
        text-decoration: line-through;
        margin-left: 20rpx;
        
        &::before {
          content: '¥';
          margin-right: 2rpx;
        }
      }
      
      .discount-tag {
        font-size: 20rpx;
        color: #fff;
        background-color: $primary-color;
        padding: 4rpx 10rpx;
        border-radius: 8rpx;
        margin-left: 20rpx;
      }
      
      .sold-count {
        flex: 1;
        text-align: right;
        font-size: 24rpx;
        color: $text-color-secondary;
      }
    }
    
    .product-name {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 1.4;
      color: $text-color-primary;
      margin-bottom: 20rpx;
    }
    
    .product-desc {
      font-size: 26rpx;
      color: $text-color-secondary;
      line-height: 1.5;
    }
  }
  
  .section-block {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid $border-color-light;
      
      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: $text-color-primary;
      }
      
      .more {
        font-size: 26rpx;
        color: $text-color-secondary;
      }
    }
  }
  
  .specs-block {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .spec-item {
      display: flex;
      padding: 30rpx;
      border-bottom: 1rpx solid $border-color-light;
      
      &:last-child {
        border-bottom: none;
      }
      
      .spec-name {
        width: 150rpx;
        font-size: 28rpx;
        color: $text-color-secondary;
      }
      
      .spec-value {
        flex: 1;
        font-size: 28rpx;
        color: $text-color-primary;
      }
      
      .arrow {
        margin-left: 10rpx;
        color: $text-color-secondary;
        font-size: 24rpx;
      }
    }
  }
  
  .reviews-block {
    .review-summary {
      display: flex;
      padding: 20rpx 30rpx;
      
      .rating-info {
        text-align: center;
        margin-right: 60rpx;
        
        .rating-score {
          font-size: 60rpx;
          font-weight: bold;
          color: $primary-color;
        }
        
        .rating-text {
          font-size: 24rpx;
          color: $text-color-secondary;
          margin-top: 10rpx;
        }
      }
      
      .rating-progress {
        flex: 1;
      }
    }
    
    .review-list {
      .review-item {
        padding: 30rpx;
        border-top: 1rpx solid $border-color-light;
        
        .user-info {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          
          .avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          
          .nickname {
            font-size: 28rpx;
            color: $text-color-primary;
          }
          
          .date {
            flex: 1;
            text-align: right;
            font-size: 24rpx;
            color: $text-color-secondary;
          }
        }
        
        .review-content {
          font-size: 28rpx;
          color: $text-color-primary;
          line-height: 1.5;
          margin-bottom: 20rpx;
        }
        
        .review-images {
          display: flex;
          flex-wrap: wrap;
          
          .image {
            width: 160rpx;
            height: 160rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 8rpx;
          }
        }
        
        .spec-info {
          font-size: 24rpx;
          color: $text-color-secondary;
          margin-top: 20rpx;
        }
      }
    }
    
    .empty-review {
      padding: 60rpx 0;
      text-align: center;
      color: $text-color-secondary;
      font-size: 28rpx;
    }
  }
  
  .detail-content {
    background-color: #fff;
    
    .html-content {
      padding: 30rpx;
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    
    .action-icons {
      display: flex;
      
      .action-item {
        position: relative;
        width: 100rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .icon {
          font-size: 44rpx;
          color: $text-color-secondary;
          margin-bottom: 6rpx;
          
          &.active {
            color: $primary-color;
          }
        }
        
        .text {
          font-size: 20rpx;
          color: $text-color-secondary;
        }
        
        .badge {
          position: absolute;
          top: -8rpx;
          right: 20rpx;
          min-width: 32rpx;
          height: 32rpx;
          padding: 0 6rpx;
          background-color: $primary-color;
          color: #fff;
          font-size: 20rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    
    .button-group {
      flex: 1;
      display: flex;
      padding: 0 20rpx;
      
      .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 40rpx;
      }
      
      .add-cart-btn {
        background-color: #ffecec;
        color: $primary-color;
        margin-right: 20rpx;
      }
      
      .buy-now-btn {
        background-color: $primary-color;
        color: #fff;
      }
    }
  }
  
  .popup-specs {
    .popup-content {
      padding: 30rpx;
      max-height: 70vh;
      overflow-y: auto;
      
      .product-info {
        display: flex;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid $border-color-light;
        
        .product-image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
        }
        
        .info {
          flex: 1;
          padding-left: 20rpx;
          
          .price {
            font-size: 36rpx;
            font-weight: bold;
            color: $primary-color;
            margin-bottom: 20rpx;
            
            &::before {
              content: '¥';
              font-size: 70%;
            }
          }
          
          .selected-spec {
            font-size: 26rpx;
            color: $text-color-secondary;
            margin-bottom: 10rpx;
          }
          
          .stock {
            font-size: 26rpx;
            color: $text-color-secondary;
          }
        }
      }
      
      .specs-list {
        padding: 30rpx 0;
        
        .spec-group {
          margin-bottom: 30rpx;
          
          .group-title {
            font-size: 28rpx;
            font-weight: bold;
            color: $text-color-primary;
            margin-bottom: 20rpx;
          }
          
          .specs {
            display: flex;
            flex-wrap: wrap;
            
            .spec {
              padding: 10rpx 30rpx;
              margin-right: 20rpx;
              margin-bottom: 20rpx;
              border-radius: 8rpx;
              font-size: 26rpx;
              border: 1px solid $border-color;
              color: $text-color-primary;
              
              &.active {
                background-color: $primary-color;
                color: #fff;
                border-color: $primary-color;
              }
              
              &.disabled {
                color: $text-color-placeholder;
                background-color: $bg-color-light;
                border-color: $border-color-light;
              }
            }
          }
        }
      }
      
      .quantity-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        
        .label {
          font-size: 28rpx;
          color: $text-color-primary;
        }
      }
      
      .popup-btns {
        display: flex;
        
        .popup-btn {
          flex: 1;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 28rpx;
          
          &.add-cart {
            background-color: #ffecec;
            color: $primary-color;
            border-radius: 0 0 0 24rpx;
          }
          
          &.buy-now {
            background-color: $primary-color;
            color: #fff;
            border-radius: 0 0 24rpx 0;
          }
        }
      }
    }
    
    .close-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      font-size: 40rpx;
      color: $text-color-secondary;
    }
  }
} 